<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: #bfa;
        }

        #box2{
            width: 150px;
            height: 150px;
            background-color: #ff0;
        }

        #box3{
            width: 50px;
            height: 50px;
            background-color: orange;
        }

    </style>

    <script>
        window.onload = function () {

            /*
                关于事件的传播方向当时两大巨头网景和微软有着不同的理解：
                    网景公司认为事件应该由外向内传递，
                        事件发生时，应该先从外层元素上的事件，然后向内一层一层传递
                        这一事件的传播机制，称为 事件的捕获
                    微软公司认为事件应该由内向外传递
                        事件发生时，应该先从内层元素（触发事件的元素）开始，然后一层一层传递
                        这一事件的传播机制，称为 事件的冒泡

                    于是W3C将事件整个分为了三个阶段：
                        1.捕获阶段
                            - 事件发生后首先从外层元素向内层元素进行事件的捕获
                            - 默认情况下此阶段并不会触发事件
                            - 如果希望在捕获阶段触发事件，可以将addEventListener()的第三个参数设置为true
                        2.目标阶段
                            - 捕获到达触发事件的元素，捕获终止
                        3.冒泡阶段
                            - 从触发事件的元素开始，向外层进行事件的冒泡，并触发事件
             */

            //分别为三个元素绑定单击响应函数
            var box1 = document.getElementById('box1');
            var box2 = document.getElementById('box2');
            var box3 = document.getElementById('box3');

            box1.addEventListener('click',function () {
                alert(1);
            }, true);

            box2.addEventListener('click',function () {
                alert(2);
            }, true);

            box3.addEventListener('click',function () {
                alert(3);
            }, true);

        };


    </script>
</head>
<body>
<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>

</body>
</html>